nodeでmaterial ui使う
概要
パパッとセッティングしたい。と思ってたんだけど、、、結局WebPackに依存しないとダメなのか。
実行はnodeでやりたいんで、混ぜられないものかと考えてた。
最終的にできた。
このへんを参考にした。
webpack+React+material-uiの環境を最小手順で作成
http://qiita.com/takaki@github/items/724d97a20d3ae194ded4
webpack is 何
依存関係を記述するとそれを解決できるようにゴインゴイン動くツール。
importって書けるの楽だよね、、っていう。
プロジェクト作成
適当にフォルダを作って、
npm init
npm install -g webpack
npm install --save react react-dom babel-preset-react babel-loader babel-core
npm install --save babel-preset-es2015
npm install --save material-ui
要素を作成。
touch index.html
mkdir src
touch src/index.js
touch webpack.config.js
touch .babelrc
それぞれのファイルの内容を書いていく。
index.html
<!DOCTYPE html>
<html>
<head>
<title>Webpack Excercise</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="content"> Content </div>
<script src="static/bundle.js" charset="utf-8"></script>
</body>
</html>
bundle.jsってのがまあ、WebPackで作り出される結果ファイルなのね。出力されるファイルの名前や場所の指定はwebpack.config.jsでやってる。
webpack.config.js
module.exports = {
entry: {
jsx: "./src/index.js"
},
output: {
path: __dirname + "/static",
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.js$/, loader: "babel-loader", exclude: /node_modules/ }
]
}
}
outputのとこで、いろいろやったファイルをstatic/bundle.jsに出力するようになってるぽい。
で、この中で、さらにコンパイラとしてbabelが指定されてる。
babelの設定ファイルは下記。
.babelrc
{ "presets": ["react", "es2015"] }
こんな感じでいいっぽい。
そーかー jsxのコンパイラがbabelに入ったってこういうことなのか。
コンパイル対象となる.jsは、
index.js
var React = require('react');
var ReactDOM = require('react-dom');
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import RaisedButton from 'material-ui/RaisedButton';
ReactDOM.render(
<div>
<MuiThemeProvider>
<RaisedButton label="Default" />
</MuiThemeProvider>
</div>,
document.getElementById('content')
);
濃い字のところのimportが使いたいがために、ここまでの苦労を、、、うーーん、、時代があるなあ、、もっと楽になってくれ。
で、ここまでいくと、
webpack --progress --color
でindex.jsがゴインゴインとコンパイルできる。
結果的にブラウザでindex.htmlを開くと、
やったぜ。
保存するたびにWebpacで自動的に
今回はやらないことにした。
nodeでサーブしてるサービスと連携したいので、ウザい。
index.jsからnodeにアクセスするのが書けるので、データのプッシュとかローディングについてはそれで解決する。